<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>立体平移、旋转</title>
</head>

<body>
  <!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
  <canvas id="webgl" width="500" height="500" style="background-color: grey"></canvas>

  <script>
    //通过getElementById()方法获取canvas画布
    var canvas = document.getElementById('webgl');
    //通过方法getContext()获取WebGL上下文
    var gl = canvas.getContext('webgl');

    //顶点着色器源码
    // var vertexShaderSource = '' +
    //   'attribute vec4 a_pos;' +

    //   'void main(){ ' +
    //   // 将角度转换为弧度
    //   '   float radian = radians(30.0);' +

    //   '   float cos = cos(radian);' +
    //   '   float sin = sin(radian);' +

    //   '   mat4 mx = mat4(1,0,0,0, 0,cos,-sin,0, 0,sin,cos,0, 0.0.0.1);' +
    //   '   mat4 my = mat4(cos,0,-sin,0, 0,1,0,0, sin,0,cos,0, 0.0.0.1);' +

    //   '   gl_Position = mx*my*a_pos;' +
    //   '}';
    var vertexShaderSource = '' +
      'attribute vec4 a_pos;' +
      'void main(){ ' +
      // 将角度转换为弧度

      '   gl_Position = a_pos;' +
      ' }';


    // var vertexShaderSource = document.getElementById("vertexShader").innerText;
    //片元着色器源码
    var fragShaderSource = '' +
      'void main(){' +
      //定义片元颜色
      '   gl_FragColor = vec4(0.5,0.1,0.3,1.0);' +
      '}';

    //初始化着色器
    var program = initShader(gl, vertexShaderSource, fragShaderSource);

    const aposLocation = gl.getAttribLocation(program, 'a_pos');
    // 3个一组
    const pointData = new Float32Array([
      0.5, 0.5, 0.5,
      0.5, -0.5, 0.5,
      -0.5, -0.5, 0.5,
      -0.5, 0.5, 0.5,

      0.5, 0.5, -0.5,
      0.5, -0.5, -0.5,
      -0.5, -0.5, -0.5,
      -0.5, 0.5, -0.5,

      0.5, 0.5, 0.5,
      0.5, 0.5, -0.5,

      0.5, -0.5, 0.5,
      0.5, -0.5, -0.5,

      -0.5, -0.5, 0.5,
      -0.5, -0.5, -0.5,

      -0.5, 0.5, 0.5,
      -0.5, 0.5, -0.5,

    ]);

    var buffer = gl.createBuffer();
    // 激活
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    // pointData激活
    gl.bufferData(gl.ARRAY_BUFFER, pointData, gl.STATIC_DRAW);
    // 3个值为一个点x,y,z
    gl.vertexAttribPointer(aposLocation, 3, gl.FLOAT, false, 0, 0);//设置点为2位
    // 允许数据传递
    gl.enableVertexAttribArray(aposLocation);
    // 从第1个点开始，先绘制4个点成矩形
    gl.drawArrays(gl.LINE_LOOP, 0, 4);//绘制形状
    // 从第5个点开始，绘制4个点成矩形
    gl.drawArrays(gl.LINE_LOOP, 4, 4);//绘制形状
    // 绘制直线
    gl.drawArrays(gl.LINES, 8, 8);//绘制形状
   

    //声明初始化着色器函数
    function initShader(gl, vertexShaderSource, fragmentShaderSource) {
      //创建顶点着色器对象
      var vertexShader = gl.createShader(gl.VERTEX_SHADER);
      //创建片元着色器对象
      var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      //引入顶点、片元着色器源代码
      gl.shaderSource(vertexShader, vertexShaderSource);
      gl.shaderSource(fragmentShader, fragmentShaderSource);
      //编译顶点、片元着色器
      gl.compileShader(vertexShader);
      gl.compileShader(fragmentShader);

      //创建程序对象program
      var program = gl.createProgram();
      //附着顶点着色器和片元着色器到program
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      //链接program
      gl.linkProgram(program);
      //使用program
      gl.useProgram(program);
      //返回程序program对象
      return program;
    }
  </script>
</body>

</html>
